<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" leftIconColor="#fff" autoBack="true" :placeholder="true" bgColor="#F9C022" :title="title"></u-navbar>
        <view class="page-foot bg-white">
            <view class="flex-box plr30 ptb10">
                <view class="red fs40 flex-grow-1">
                    <text class="fs30 col5">合计：</text>
                    <text class="fs24">¥</text>
                    <text class="fwb">{{order.pay_price}}</text>
                </view>
                <view class="btn2 mr30" v-if="order.order_type==1 && order.state==2" @click="bindLogistics()">查看物流</view>
                <view class="btn1" v-if="order.state==1" @click.stop="bindFreightToggle()">去发货</view>
                <view class="btn1" v-if="order.state==5 && ((order.aftersale.state==0 && order.aftersale.type==0) || order.aftersale.state==2)" @click="bindAftersaleRefund()">同意退款</view>
                <view class="btn1" v-if="order.state==5 && order.aftersale.state==0 && order.aftersale.type==1" @click="bindAftersaleAgree()">同意申请</view>
                <view class="btn1" v-if="order.state==5  && ((order.aftersale.state==0 && order.aftersale.type==0) || order.aftersale.state==2)" @click="bindAfterToggle()">拒绝退款</view>
                <view class="btn1" v-if="order.state==5  && order.aftersale.state==0 && order.aftersale.type==1" @click="bindAfterToggle()">拒绝申请</view>
            </view>
        </view>
        <view class="container">
            <view class="xilu_bg_block"></view>
            <view class="xilu_order_detail">
                <view class="xilu_status plr30 ptb40 mb20">
                    <view class="fs36 pb20 fwb" v-if="order.state==-1">已取消</view>
                    <view class="fs36 red pb20 fwb" v-if="order.state==0">待付款</view>
                    <view class="fs36 lightblue pb20 fwb" v-else-if="order.state==1">待发货</view>
                    <view class="fs36 col10 pb20 fwb" v-else-if="order.state==2">待收货</view>
                    <view class="fs36 col5 pb20 fwb" v-else-if="order.state==3">待评价</view>
                    <view class="fs36 col5 pb20 fwb" v-else-if="order.state==4">已完成</view>
                    <view class="fs36 col5 pb20 fwb" v-else-if="order.state==5">买家申请退款</view>
                    <view class="fs36 col5 pb20 fwb" v-else-if="order.state==6">退款成功</view>
                    <view class="fs36 col5 pb20 fwb" v-else-if="order.state==7">退款失败</view>
                    <!-- <view class="fs36 col5 pb20 fwb">售后</view> -->
                    <view class="fs36 orange pb20 fwb" v-if="order.order_type==2">自提</view>

                    <view class="fs30 col5" v-if="order.state==0">等待买家付款，2{{order.expiretime_text}}前未付款自动关闭～</view>
                    <!-- <view class="fs30 col5">请在24小时内进行处理～</view> -->
                    <!-- <view class="fs30 col5">卖家已同意退货退款</view> -->
                </view>
                <view class="xilu_status p30 mb20 xilu_refund" v-if="order.order_type==2 && order.state==2">
                    <view class="fs34 col5 pb20 fwb">自提地址</view>
                    <view class="fs34 col10 pb15">{{order.pick_address}}</view>
                    <!-- <view class="fs30 col5"><text class="pr30">左佳青</text><text>15912848153</text></view> -->
                </view>
                <!-- <view class="xilu_status p30 mb20 xilu_refund">
                    <view class="fs34 col5 pb20 fwb">退货地址</view>
                    <view class="fs34 col10 pb15">贵州省安顺市紫云苗族布依族自治县平安胡同213号</view>
                    <view class="fs30 col5"><text class="pr30">左佳青</text><text>15912848153</text></view>
                </view> -->
                <view class="xilu_status p30 mb20" v-if="order.aftersale">
                    <view class="fs34 col5 pb20 fwb">售后信息</view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">申请类型</view>
                        <view class="fs28 col10">{{order.aftersale.type_text}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">货物状态</view>
                        <view class="fs28 col10">{{order.aftersale.express_type_text}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">申请原因</view>
                        <view class="fs28 col10">{{order.aftersale.reason}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">退款金额</view>
                        <view class="fs30 red"><text class="fs24">¥</text>{{order.aftersale.price}}</view>
                    </view>
                    <view class="fs30 col5 pb30">申请说明</view>
                    <view class="xilu_declear">{{order.aftersale.refund_content}}</view>
                    <view class="fs30 col5 pt40 pb10">说明图片</view>
                    <view class="flex-box flex-wrap" v-if="order.aftersale.images_text.length>0">
                        <image v-for="img in order.aftersale.images_text" :src="img" mode="aspectFill" class="xilu_goods"></image>
                        <!-- <image src="/static/images/goods.png" mode="aspectFill" class="xilu_goods"></image> -->
                    </view>
                    <view class="flex-box pt30">
                        <view class="fs30 col5 flex-grow-1">申请时间</view>
                        <view class="fs28 col10">{{order.aftersale.createtime_text}}</view>
                    </view>
                </view>
                <view class="xilu_status p30 mb20" v-if="order.order_type==1">
                    <view class="fs34 col5 pb20 fwb">收货地址</view>
                    <view class="fs34 col10 pb15">{{order.order_address.Area.province+order.order_address.Area.city+order.order_address.Area.region+order.order_address.address_detail}}</view>
                    <view class="fs30 col5"><text class="pr30">{{order.order_address.name}}</text><text>{{order.order_address.mobile}}</text></view>
                </view>
                <view class="xilu_status p30 mb20">
                    <view class="fs34 col5 pb20 fwb">商品信息</view>
                    <view class="flex-box" v-for="(product,index) in order.order_product">
                        <image :src="product.image" class="xilu_pic" mode="aspectFill"></image>
                        <view class="flex-grow-1">
                            <view class="m-ellipsis-l2 fs30 col10 mb50">{{product.product_name}}</view>
                            <view class="flex-box flex-between">
                                <view class="red fs40 "><text class="fs24">¥</text><text class="fwb">{{product.product_price}}</text></view>
                                <!-- <view class="xilu_refunding">{{order.state_text}}</view> -->
                            </view>
                        </view>
                    </view>
                </view>
                <view class="xilu_status p30 mb20">
                    <view class="fs34 col5 pb20 fwb">订单信息</view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">买家信息</view>
                        <image :src="order.user.avatar" mode="aspectFill" class="xilu_avatar"></image>
                        <view class="fs28 blue">{{order.user.nickname}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">订单号</view>
                        <view class="fs28 col10">{{order.order_no}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">商品金额</view>
                        <view class="fs30 red"><text class="fs24">¥</text>{{order.total_price}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">运费</view>
                        <view class="fs30 red"><text class="fs24">¥</text>{{order.express_price}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">支付方式</view>
                        <image src="../../static/icon/wechat.png" mode="aspectFill" class="xilu_wechat"></image>
                        <view class="fs30 col10">微信支付</view>
                    </view>
                    <view class="tr red fs40">
                        <text class="fs30 col5">合计：</text>
                        <text class="fs24">¥</text>
                        <text class="fwb">{{order.pay_price}}</text>
                    </view>
                </view>
            </view>
        </view>
		<u-popup :show="sendGoodsPop" mode="center" :closeable="true" closeOnClickOverlay @close="sendGoodsPop = false" round="20rpx">
		    <view class="sendGoods">
		        <view class="fs34 col3 fwb tc pb40">去发货</view>
		        <view class="picker_box plr40 flex-box mb30">
		            <view class="fs30 col5">物流公司</view>
		            <view class="flex-grow-1 pr30 tr m-arrow-right">
		                <multi-select :items="expressCompany" @change="bindCompanyChange" id_key="id" name_key="name" children_key="childlist" :value="express_company_id" ref="pickers">
		                    <view class="inp_item flex-box ">
		                        <view class="flex-grow-1 fs30" v-if="!selectedExpress">请选择</view>
		                        <view class="flex-grow-1 fs30 col1" v-else> {{selectedExpress.name}}
		                        </view>
		                        </image>
		                    </view>
		                </multi-select>
		            </view>
		        </view>
		        <view class="picker_box plr40 flex-box">
		            <view class="fs30 col5">物流单号</view>
		            <input type="text" class="flex-grow-1 tr" v-model="express_no" placeholder="请输入" placeholder-class="col0" />
		        </view>
		        <view class="btn" @click="bindFreight()">确定提交</view>
		    </view>
		</u-popup>
		<u-popup :show="sendGoodsPop2" mode="center" closeable closeOnClickOverlay @close="sendGoodsPop2 = false" round="20rpx">
		    <view class="refuse_pop">
		        <view class="fs34 col3 fwb tc pb40">自提地址</view>
		        <textarea class="textarea" cols="30" v-model="address" rows="10"></textarea>
		        <view class="btn" @click="bindAddress()">确定提交</view>
		    </view>
		</u-popup>
        <u-popup :show="refusePop" mode="center" closeable closeOnClickOverlay @close="refusePop = false" round="20rpx">
            <view class="refuse_pop">
                <view class="fs34 col3 fwb tc pb40">拒绝原因</view>
                <textarea class="textarea" cols="30" v-model="refuse_content" rows="10"></textarea>
                <view class="btn" @click="bindAftersaleRefuse()">确定提交</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
	var validate = require("../../xilu/validate.js");
    export default {
        data() {
            return {
                title: "待付款",
				orderId: 0,
				order:{
					order_address:{
						Area:{province:'',city:'',region:''},
						address_detail:''
					},
					order_product:[]
				},
				sendGoodsPop:false,
				sendGoodsPop2:false,
				expressCompany:[],
				selectedExpress: null,
				express_company_id: 0,
				express_no: '',
				address:'',
                refusePop: false, //拒绝弹窗
				refuse_content:'', //拒绝理由
            };
        },
		onLoad(options) {
			this.orderId = options.id || 0;
			this.fetchDetail();
		},
		methods:{
			fetchDetail(){
				this.$core.post({url: 'xilumarket.order/seller_detail',data: {order_id:this.orderId},loading: false,success: ret => {
						this.order = ret.data;
						this.title = ret.data.state_text
					},fail: err => {
						console.log(err);
					}
				});
			},
			
			//发货
			bindFreightToggle(){
				if(this.order.order_type == 2){
					this.sendGoodsPop2 = true;
				}else{
					this.$core.post({url: 'xilumarket.order/express_company',data: {},loading: true,success: ret => {
						this.sendGoodsPop = true;
						this.expressCompany = ret.data
					}
					})
				}
			},
			//物流公司
			bindCompanyChange(e) {
				let index = e.indexValues;
				this.express_company_id = this.expressCompany[index[0]].id;
				this.selectedExpress = {
					id: this.express_company_id,
					'name': this.expressCompany[index[0]].name
				};
			},
			bindFreight(){
				let order = this.order;
				if(order.state != 1){
					uni.showToast({title: '当前商品不可发货',icon:'none'});
					return false;
				}
				
				let data = {
					order_id: order.id,
					express_company_id: this.express_company_id,
					express_no: this.express_no
				}
				var rule = [
					{name: 'order_id',nameChn: '订单',rules: ['require','gt:0'],errorMsg: {require: '订单错误',gt: '订单错误'},},
					{name: 'express_company_id',nameChn: '物流公司',rules: ['require','gt:0'],errorMsg: {require: '请选择物流公司',gt: "请选择物流公司"},},
					{name: 'express_no',nameChn: '物流单号',rules: ['require'],errorMsg: {require: '请填写物流单号'},},
					];
				if(!validate.check(data,rule)){
					uni.showToast({title: validate.getError()[0],icon:'none'});
					return ;
				}
				this.$core.post({url: 'xilumarket.order/send_freight',data: data,loading: true,success: ret => {
					uni.showToast({
						title:"发货成功"
					})
					this.fetchDetail()
					this.selectedExpress = null;
					this.sendGoodsPop = false;
					this.express_company_id = 0;
					this.express_no = '';
				},fail: err => {
					uni.showModal({
						title:'提示',
						content: err.msg,
						showCancel: false,
						success() {
							uni.navigateBack()
						}
					})
					return false;
				}
				});
			},
			//自提发货
			bindAddress(){
				let order = this.order;
				if(order.state != 1){
					uni.showToast({title: '当前商品不可发货',icon:'none'});
					return false;
				}
				let data = {
					order_id: order.id,
					address: this.address,
				}
				var rule = [
					{name: 'order_id',nameChn: '订单',rules: ['require','gt:0'],errorMsg: {require: '订单错误',gt: '订单错误'},},
					{name: 'address',nameChn: '自提地址',rules: ['require'],errorMsg: {require: '请填写自提地址'},},
					];
				if(!validate.check(data,rule)){
					uni.showToast({title: validate.getError()[0],icon:'none'});
					return ;
				}
				this.$core.post({url: 'xilumarket.order/send_address',data: data,loading: true,success: ret => {
					uni.showToast({
						title:"发货成功"
					})
					this.fetchDetail()
					this.sendGoodsPop2 = false;
					this.address = '';
				},fail: err => {
					uni.showModal({
						title:'提示',
						content: err.msg,
						showCancel: false,
						success() {
							uni.navigateBack()
						}
					})
					return false;
				}
				});
			},
			//物流
			bindLogistics(){
				uni.navigateTo({
					url: '/pages/logistics/logistics?order_id='+this.orderId
				})
			},
			//售后
			bindAfterToggle(){
				this.refusePop = true;
			},
			//拒绝
			bindAftersaleRefuse(){
				let order = this.order;
				if(order.state != 5){
					uni.showToast({title: '当前商品不可操作',icon:'none'});
					return false;
				}
				let data = {
					aftersale_id: order.aftersale.id,
					refuse_content: this.refuse_content,
				}
				if(!this.refuse_content.trim()){
					uni.showToast({title: '请填写拒绝理由',icon:'none'});
					return false;
				}
				this.$core.post({url: 'xilumarket.aftersale/refuse',data: data,loading: true,success: ret => {
					uni.showToast({
						title: "操作成功",
						icon:'none'
					})
					this.fetchDetail()
					this.refusePop = false;
				},fail: err => {
					uni.showModal({
						title:'提示',
						content: err.msg,
						showCancel: false,
						success() {
							uni.navigateBack()
						}
					})
					return false;
				}
				});
			},
			//同意申请
			bindAftersaleAgree(){
				let order = this.order;
				if(order.state != 5){
					uni.showToast({title: '当前商品不可操作',icon:'none'});
					return false;
				}
				let page = this;
				uni.showModal({
					title:"提示",
					content:'确认同意用户申请，该操作需要用户提交物流信息',
					success(res) {
						if(res.confirm){
							page.$core.post({url: 'xilumarket.aftersale/agree_apply',data: {aftersale_id: order.aftersale.id},loading: true,success: ret => {
								uni.showToast({
									title: "操作成功",
									icon:'none'
								})
								page.fetchDetail()
							},fail: err => {
								uni.showModal({
									title:'提示',
									content: err.msg,
									showCancel: false,
									success() {
										uni.navigateBack()
									}
								})
								return false;
							}
							});
						}
					}
					
				})
				
			},
			//同意退款
			bindAftersaleRefund(){
				let order = this.order;
				if(order.state != 5){
					uni.showToast({title: '当前商品不可操作',icon:'none'});
					return false;
				}
				let page = this;
				uni.showModal({
					title:'提示',
					content:'确认同意退款，该操作不可撤销',
					success(res){
						if(res.confirm){
							page.$core.post({url: 'xilumarket.aftersale/refund',data: {aftersale_id: order.aftersale.id},loading: true,success: ret => {
								uni.showToast({
									title: "操作成功",
									icon:'none'
								})
								page.fetchDetail()
							},fail: err => {
								uni.showModal({
									title:'提示',
									content: err.msg,
									showCancel: false,
									success() {
										uni.navigateBack()
									}
								})
								return false;
							}
							});
						}
						
					}
				})
				
			},
			
					
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_logo {
            width: 80rpx;
            height: 80rpx;
        }

        &_center_slot {
            width: 402rpx;
            height: 75rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #555555;
            margin-left: -60rpx;
            padding: 0 12rpx 0 20rpx;
        }

        &_bg {
            width: 750rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(452rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        .container {
            background-color: #f7f9fc;
            min-height: calc(100vh - 44px - var(--status-bar-height));
        }

        &_order_detail {
            position: relative;
            z-index: 4;
            padding: 30rpx;
        }

        &_status {
            background-color: var(--white);
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
        }

        &_refund {
            background-color: #FFE69D;
        }

        &_pic {
            width: 180rpx;
            height: 180rpx;
            border-radius: 10rpx;
            margin-right: 30rpx;
        }

        &_avatar {
            width: 35rpx;
            height: 35rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        &_wechat {
            width: 30rpx;
            height: 30rpx;
            margin-right: 15rpx;
        }

        .btn1,
        .btn2 {
            width: 180rpx;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 24rpx;
        }

        &_refunding {
            width: 130rpx;
            height: 54rpx;
            line-height: 54rpx;
            background: #FFF3CC;
            border-radius: 28rpx;
            font-size: 24rpx;
            color: #101010;
            text-align: center;
        }

        &_declear {
            width: 630rpx;
            background: #F7F9FC;
            border-radius: 15rpx;
            font-size: 30rpx;
            color: #101010;
            padding: 30rpx;
        }

        &_goods {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            margin-top: 20rpx;
        }

        .refuse_pop {
            padding: 50rpx 40rpx 30rpx;

            .textarea {
                width: 570rpx;
                height: 280rpx;
                background: #F7F9FC;
                border-radius: 20rpx;
            }

            .btn {
                width: 500rpx;
                height: 100rpx;
                line-height: 100rpx;
                background: #FFC100;
                border-radius: 50rpx;
                text-align: center;
                margin: 36rpx auto 0;
            }
        }
		
		.sendGoods {
		    padding: 50rpx 30rpx 56rpx;
		
		    .picker_box {
		        width: 570rpx;
		        height: 100rpx;
		        background: #F7F9FC;
		        border-radius: 55rpx;
		    }
		
		    .btn {
		        width: 500rpx;
		        height: 100rpx;
		        background: #FFC100;
		        border-radius: 50rpx;
		        line-height: 100rpx;
		        text-align: center;
		        margin: 40rpx auto 0;
		        font-size: 30rpx;
		        color: #101010;
		    }
		}
		
    }
</style>